<template>
    <div class="addBox">
        <p style="text-align: center;">添加部门：</p>
        <p>部门名称：</p>
        <input type="text" v-model="tname">
        <p>部门电话：</p>
        <input type="text" v-model="ttel">
        <p>部门负责人：</p>
        <input type="text" v-model="tprin">
        <p>部门负责人电话：</p>
        <input type="text" v-model="tprin_tel">
        <p><button id="addConfirmButton" @click="addConfirm"
                style="background-color: rgb(125, 166, 220);color: white;width: 80px;height: 23px;border: 0;">新增</button><button
                id="cancelButton" @click="cancel"
                style="background-color: rgb(231, 66, 66);color: white;width: 80px;height: 23px;border: 0;">取消</button>
        </p>
    </div>
</template>
<script>
import { useRoute, useRouter } from 'vue-router';
export default {
    inject: ["$http"],
    data() {
        return {
            tname:"",
            ttel:"",
            tprin:"",
            tprin_tel:"",

            isActive: true,
            route: useRoute(),
            router: useRouter(),
            addArr: {
                name: "",
                principal: "",
                principal_tel: "",
                tel: ""
            }
        }
    },
    methods: {
        async addConfirm() {
            this.addArr.name = this.tname
            this.addArr.principal = this.ttel
            this.addArr.principal_tel = this.tprin
            this.addArr.tel = this.tprin_tel
            await this.$http.post("/dep", this.addArr)
            this.router.push("/home/dept")
        },
        cancel() {
            this.tname=""
            this.ttel=""
            this.tprin=""
            this.tprin_tel=""
            this.router.go(-1)
        }
    }
}
</script>
<style scoped>
.addBox {
    width: 500px;
    height: 500px;
    background-color: #d6e1e9;
    padding: 10px;
    /* display: none; */
    position: fixed;
    top: 60px;
    left: 500px;
}

.addBox p {
    width: 500px;
    height: 25px;
}

.addBox input {
    width: 420px;
    height: 35px;
}

.active {
    display: block;
}
</style>